<template>
  <div class="body">
    <h1>案例导航</h1>
    <el-row :gutter="0" v-for="n in 2" :key="n">
      <el-col :span="4" v-for="(o, index) in 4" :key="index" :offset="2">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
          <div style="padding: 14px">
            <span>好吃的汉堡</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
    };
  },
};
</script>

<style lang="less" scoped>
.body {
  text-align: center;
  height: 100%;
  width: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-card.is-hover-shadow:hover {
  box-shadow: black 0px 0px 10px;
}
.el-card.is-hover-shadow:hover img{
  transform: scale(1.4);

}
.el-card.is-hover-shadow img{
  transition: all 0.5s;

}

.el-col-offset-2 {
  margin-left: 6.7%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>


